<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8"/>
    <title>用户登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <script type='text/javascript'>
		//校验验证码
		function check() {
			// var username = document.getElementById("username").value;
			// if(username.length <=0){
			// 	document.getElementById("text").innerHTML = "请输入账号";
			// 	return false;
			// }
			// var password = document.getElementById("password").value;
			// if(password.length <=0){
			// 	document.getElementById("text").innerHTML = "请输入密码";
			// 	return false;
			// }
			var flag;
			var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
			if (inputCode.length <= 0) { //若输入的验证码长度为0
				document.getElementById("text").innerHTML = "请输入验证码";
				return false;
			}
			$.ajaxSetup({
				async: false
			});
			$.get("/work/checkCode?code=" + inputCode, function (data) {
				if (data == "success") {
					flag = true;
				} else {
					document.getElementById("text").innerHTML = "验证码输入错误！";
					createCode();//刷新验证码
					document.getElementById("input").value = "";//清空文本框
					flag = false;
				}
			});
			return flag;
		}

		function run() {
			if (check()) {
				$("#from-id").submit();
			}
		}

		// 刷新图片
		function createCode() {
			var imgSrc = $("#imgObj");
			var src = imgSrc.attr("src");
			imgSrc.attr("src", changeUrl(src));
		}

		//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
		function changeUrl(url) {
			var timestamp = (new Date()).valueOf();
			return "/work/validateCode?timestamp="+timestamp;
			//
			//
			// if (url.indexOf("?") > -1) {
			// 	url = url + "&timestamp=" + timestamp
			// } else {
			// 	url = url + "?timestamp=" + timestamp
			// }
			// // url = url + "?timestamp=" + timestamp;
			// return url;
		}

		document.onkeydown = function (event) {
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if (e && e.keyCode == 13) { // enter 键
				run();
			}
		};
    </script>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"-->
    <!--type="text/css"/>-->
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet"
          type="text/css"/>
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
    <link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN THEME GLOBAL STYLES -->
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css"/>
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME GLOBAL STYLES -->
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="../assets/pages/css/login.min.css" rel="stylesheet" type="text/css"/>
    <!-- END PAGE LEVEL STYLES -->
    <!-- BEGIN THEME LAYOUT STYLES -->
    <!-- END THEME LAYOUT STYLES -->
    <link rel="shortcut icon" href="favicon.ico"/>
</head>
<!-- END HEAD -->

<body class=" login">
<!-- BEGIN LOGO -->
<div class="logo">
    <a href="index.html">
        <img src="../assets/layouts/layout4/img/logo.jpg" alt=""/> </a>
</div>
<!-- END LOGO -->
<!-- BEGIN LOGIN -->
<div class="content">
    <!-- BEGIN LOGIN FORM -->
    <form class="login-form" th:action="@{/login}" action="/login" method="post" id="from-id"
          onkeydown="if(event.keyCode==13){return false;}" onSubmit="return check();">
        <h3 class="form-title font-green">欢迎登录美凯龙管理系统</h3>
        <!--<div class="alert alert-danger display-hide">-->
        <!--<button class="close" data-close="alert"></button>-->
        <!--<span > Enter any username and password. </span>-->
        <!--</div>-->
        <!--<p th:if="${param.logout}" class="bg-warning">已注销</p>-->
        <!--<p th:if="${param.error}"  class="bg-danger">用户名或密码错误</p>-->

        <div class="form-group">
            <div>
                <h5 id="text" style="color: red"></h5>
            </div>
            <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
            <label class="control-label visible-ie8 visible-ie9">Username</label>
            <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off"
                   placeholder="账号" id="username" name="username"/></div>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">Password</label>
            <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off"
                   placeholder="密码" id="password" name="password"/></div>
        <div class="form-group">
            <div class="row" style="width: auto">
                <div class="col-sm-3" style="margin-right: 1px;width: 177px">
                    <input type="text" class="form-control" style="width: 175px" maxlength="4" placeholder="请输入验证码"
                           id="input"/>
                </div>
                <div class="col-sm-3" style="margin-right: 1px;width: 101px">
                    <img id="imgObj" onclick="createCode()" style="width:100px;height: 42px" src="/work/validateCode"/>
                </div>
                <div class="col-sm-1" style="margin-left: 1px">
                    <input type="button" class="btn btn-danger" style="width: 60px;height: 42px" value="换一张"
                           onclick="createCode()"/>
                </div>
            </div>
        </div>
        <div align="center" class="form-actions">
            <!--<button type="submit" class="btn green uppercase">登录</button>-->
            <button type="button" class="btn green uppercase" onclick="run()">登录</button>
        </div>

    </form>
    <!-- END REGISTRATION FORM -->
</div>
<div class="copyright"> 美凯龙</div>
<!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"
        type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="../assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../assets/pages/scripts/login.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<!-- END THEME LAYOUT SCRIPTS -->
</body>

</html>